<template>
	<view class="modal">
		<view class="mask" @click="onclickCancel"></view>
		<view class="dialog">
			<view v-show="title != ''?true:false" class="title" >{{title}}</view>
			<view :class="'content ' + (textAlign == 1?'text-left':'text-content')"> 
				<view v-for="(item, index) of contnetWith" :key="index">
					{{item}}
				</view>
				
				<!-- {{content}} -->
			</view>
			<view class="bottom">
				<view @click="onclickDetermine" class="cancel"> {{butCon}} </view>
				<!-- <view @click="onclickDetermine" class="determine"> 确定 </view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'oneButPopup',
		props:{
			title:{type: String,default: ''},
			content:{type: String,default: '提示内容'},
			butCon:{type: String,default: '我知道了'},
			
		},
		data() {
			return {	
				contnetWith: [],
				textAlign: 0,
			};
		},
		watch:{
			content(ve) {
				this.contnetWith = ve.split('\n\r');
				console.log(this.contnetWith.length);
				this.textAlign = this.contnetWith.length > 1 ? 1 : 0;
				this.$forceUpdate();
			}
		},
		
			
		mounted() {
			this.contnetWith = this.content.split('\n\r');
			this.textAlign = 0;
		},
		methods: {
			// 取消
			onclickCancel(){
				this.$emit("cancel");
			},
			// 确定
			onclickDetermine(){
				this.$emit("determine");
			}
		},
	}
</script>

<style scoped>
	
	.modal {position: fixed;width: 100%;height: 100%;z-index: 888;top: 0;left: 0;}
	
	.modal .mask {position: relative;top: 0;left: 0;width: 100%;height: 100%;background-color: #000000;opacity:0.5;z-index: -1;}
	
	.modal .dialog {
		width: 80vw;
		position: absolute;
		left: 50%;
		top: 50%;transform: translate(-50%, -50%);
		box-sizing: border-box;
		background: white;
		padding: 2vw;
		border-radius: 2vw;
	}
	
	.modal .title{font-size: 36rpx;
		height: 12vw;
		line-height: 9vw;
		background: white;
		color: #333333;
		text-align: center;
		font-weight: 500;
	}
	.modal .content{
		font-size: 30rpx;
		padding: 0vw 5vw 3vw 5vw;
		color: #333333;
		/* text-align: center; */
		line-height: 50rpx;
		max-height: 600rpx;
		overflow-y: auto;
	}
	.text-left{
		text-align: left;
	}
	.text-content{
		text-align: center;
	}
	.modal .bottom{
		width: 88%;
		margin-left: 6%;
		padding-top: 4vw;
		border-top: 1px solid #e8e8e8;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.modal .bottom .cancel{
		width: 24vw;
		text-align: center;
		font-size: 34rpx;
		color: #219afc;
		/* background-color: #dc4c4c; */
		border-radius: 6vw;
		height: 8vw;
		line-height: 8vw;
		/* border: 1px solid; */
		/* border-color: #dc4c4c; */
	}

	
</style>
